<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			* {
				padding: 0px;
				margin: 0px;
				list-style: none;
				box-sizing: border-box;
			}
			
			.container {
				/* 变为弹性盒子 */
				display: flex;
				width: 1200px;
				margin: auto;
				flex-wrap: wrap;
				justify-content: space-around
			}
			
			.container>li {
				width: 25%;
				height: 100px;
				border: 1px solid #000;
				background-color: yellow;
			}
			
			
		</style>
	</head>
	<body>
		<ul class="container">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
		</ul>
	</body>
</html>